<template>
<div>
    <el-button type="primary" style="margin-bottom: 10px" @click="addRow">新增分类</el-button>
    <!-- 分类管理 -->
<el-dialog v-model="dialogVisible" :title="id?'修改分类':'新增分类'" :before-close="handleBeforeClose"> 
    <CategoryEdit ref="categoryForm" :id="id" @success="editSuccess" ></CategoryEdit>
</el-dialog>
    <el-table ref="tableRef" :data="tableData" style="margin-bottom: 20px" row-key="id" border>
        <el-table-column prop="name" label="分类名称" sortable />
        <el-table-column label="分类级别">
            <template #default="{ row }">
                <span v-if="row.pid == 0">一级分类</span>
                <span v-else>二级分类</span>
            </template>
        </el-table-column>
        <el-table-column prop="id" label="分类编号" />
        <el-table-column label="分类图片">
            <template #default="{ row }">
                <el-image v-if="row.picture != ''" :src="row.picture" fit="contain" style="display: flex; align-items: center; height: 60px" />
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
            
            <template #default="{ row }">
                <el-button type="warning" @click="editRow(row)">编辑</el-button>
                <el-button type="danger" @click="delRow(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

</div>
</template>



<script setup>
import { getCategoryList,delCategory} from '../../api/index'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
    ref,
    onMounted
} from 'vue'
import CategoryEdit from '../../components/categoryEdit.vue';

// part1:加载
const tableData=ref()
//
onMounted(()=>
    loadCategoryList()  
)
const loadCategoryList=async()=>{
    const data=await getCategoryList()
    tableData.value=convertToTree(data)
}
const convertToTree=data=>{
    const treeData={}
    const map=[]
    for(const item of data){
        map[item.id]={...item,children:[]}
    }
    for(const item of data){
        const node=map[item.id]
        if(item.pid===0){
            tableData.push(node)
        }else{
            const parent=map[item.pid]
            if(parent){
                parent.children.push(node)
            }
        }
    }
    return treeData
}

//对话框
const dialogVisible=ref(false)

const handleBeforeClose=()=>{
    ElMessageBox.confirm("确定要关闭对话框",
        {
            showClose:false,
            closeOnClickModal:false,
            confirmButtonText:'确定',
            cancelButtonText:"取消"
        }
    ).then(()=>{
        dialogVisible.value=false
    }).catch(()=>{})
}

const editSuccess=()=>{
    dialogVisible.value=true
    loadCategoryList()
}

// 父组件重置出现在add && edit

//删除
const delRow=row=>{
    if(row.pid===0 && row.children.length!==0){
        ElMessage({
            type:"warning",
            message:"该分类下有二级分类，请删除完所以而分类再删除此类"
        })
    }else{
        ElMessageBox.confirm("确定删除此类",{
            closeOnClickModal:false,
            confirmButtonText:'确定',
            cancelButtonText:"取消"
        }).then(async()=>{
            if(await delCategory({id:row.id})){
                loadCategoryList()
            }
        }).catch(()=>{

        })
        }
    }

//add
const id=ref(0)
const categoryForm=ref([])
const addRow=()=>{
    if(categoryForm){
categoryForm.value.resetForm(0)
    }
    id.value=0
    dialogVisible.value=true
}

const editRow=(row)=>{
    if(categoryForm){
categoryForm.value.resetForm(row.id)
    }
    id.value=id
    dialogVisible.value=true
}










// const tableData=ref([])
// //加载数据 转化为树形结构
// onMounted(()=>{
//     loadCategoryList()
// })
// const loadCategoryList=async()=>{
//      const data= await getCategoryList()
//      tableData.value=convertToTree(data)
// }
// const convertToTree=data=>{
//     const treeData=[]
//     const map={}
//     for(const item of data){
//         map[item.id]={...item,children:[]}
//     }
//     for(const item of data){
//         const node=map[item.id] 
//         if(item.pid==0){
//             treeData.push(node)
//         }else{
//             const parent=map[item.pid]
//             if(parent){
//                 parent.children.push(node)
//             }
//         }
//     }
//     return treeData
// }
// //关于对话框操作 定义控制显示隐藏对话框变量 ；关闭对话框
// const dialogVisible=ref(false)


// function handleBeforeClose() {
//   ElMessageBox.confirm("确定关闭对话框吗", {
//     showClose: false,
//     closeOnClickModal: false,
//     confirmButtonText: "确定",
//     cancelButtonText: '取消'
//   }).then(() => {
//     dialogVisible.value=false;
//   }).catch(() => {
//   });
// }

// //修改添加按钮按下自动关闭对话框 父传子
// const editSuccess=()=>{
//     dialogVisible.value=false
//     loadCategoryList()
// }
// //删除
// const delRow=row=>{
//     if(row.pid===0 && row.children.length!==0){
//         ElMessage({
//             type:'warning',
//             message:'此分类是二级分类 ，请先删除所以二级分类再删除此类'
//         })
//     }else{
//         ElMessageBox.confirm("确定删除此类",{
//             closeOnClickModal:false,
//             confirmButtonText:'确定',
//             cancelButtonText:"取消"
//         }).then(async()=>{
//             if(await delCategory({id:row.id})){
//                 loadCategoryList()
//             }
//         }).catch(()=>{

//         })
//     }

// }


// //添加（子组件定义重置方法）
// const id=ref(0)

// const categoryForm=ref()
// const addRow=()=>{
//     if(categoryForm.value){
//         categoryForm.value.resetForm(0)
//     }
//     id.value=0
//     dialogVisible.value=true
// }
// const editRow=row=>{
//     if(categoryForm.value){
//         categoryForm.value.resetForm(row.id)

//     }
//     id.value=row.id
//     dialogVisible.value=true
// }
</script>